<template>
	<view class="container">
		<insert-btn :isShow="isShow" @insert="handleShowFrom"></insert-btn>
		<view class="content"  v-show="!isShow">
			<view class="family-wrapper"> 
				<view class="family-item">
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								员工姓名
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="text"
								v-model="familyInfoArgs.name"
							/>
						</view>
					</view>
					
					<view 
						class="staff-item flex-1" 
						
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">第几种方式签署</text>
						</view>
						<view 
							class="staff-inp"
							style="padding-left: 20rpx; position: relative;"
						>
							<picker
								@change="contractWayPickerChange" 
								:value="familyInfoArgs.contractWayIndex"
								 range-key="value"
								:range="contractWayArray"
								class="company-wrapper"
							>
								<view 
								  class="company-name"
								  v-if="contractWayArray[familyInfoArgs.contractWayIndex]"
								>
									{{contractWayArray[familyInfoArgs.contractWayIndex].value}}
								</view>
								<view
								  class="company-name-tip"
								  v-if="!contractWayArray[familyInfoArgs.contractWayIndex]"
								>  请选择 </view>
							</picker>
							<uni-icons
								type="bottom" 
								size="22"
								color="#D0D0D0"
								class="bottom-icons"
							>
							</uni-icons>
						</view>
					</view>
					
					
					<view 
						class="staff-item"
						v-show="familyInfoArgs.contractWayIndex === 0"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">固定期限开始日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.startDate" 
								@change="event => handleDateChange(event,'start')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.startDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view 
						class="staff-item"
						v-show="familyInfoArgs.contractWayIndex === 0"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">固定期限结束日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.endDate" 
								@change="event => handleDateChange(event,'end')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.endDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view
						class="staff-item"
						v-show="familyInfoArgs.contractWayIndex === 1"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">无固定期限开始日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.alwayDate" 
								@change="event => handleDateChange(event,'alway')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.alwayDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view
						class="staff-item"
						v-show="familyInfoArgs.contractWayIndex === 2"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">任务期限开始日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.taskDate" 
								@change="event => handleDateChange(event,'task')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.taskDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view 
						class="staff-item" 
						v-show="familyInfoArgs.contractWayIndex === 2"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								完成任务标志
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="text"
								v-model="familyInfoArgs.completeTask"
							/>
						</view>
					</view>
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								试用期
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box disabled"  
								type="number"
								disabled
								v-model="familyInfoArgs.period"
							/>
						</view>
					</view>
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								工作地点
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box "  
								type="text"
								v-model="familyInfoArgs.address"
							/>
						</view>
					</view>
					
					<view
						class="staff-item flex-1" 	
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">工作岗位</text>
						</view>
						<input
							class="inp-box "  
							type="text"
							v-model="familyInfoArgs.job_description"
						/>
				<!-- 		<view 
							class="staff-inp"
							style="padding-left: 20rpx; position: relative;"
						>
							<picker
								@change="positionPickerChange" 
								:value="familyInfoArgs.positionIndex"
								 range-key="value"
								:range="positionArray"
								class="company-wrapper"
							>
								<view 
								  class="company-name"
								  v-if="positionArray[familyInfoArgs.positionIndex]"
								>
									{{positionArray[familyInfoArgs.positionIndex].value}}
								</view>
								<view
								  class="company-name-tip"
								  v-if="!positionArray[familyInfoArgs.positionIndex]"
								>  请选择 </view>
							</picker>
							<uni-icons
								type="bottom" 
								size="22"
								color="#D0D0D0"
								class="bottom-icons"
							>
							</uni-icons>
						</view> -->
					</view>
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								劳动报酬支付方式
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box disabled"  
								type="number"
								placeholder="(一)、(四)"
								placeholder-class="place-holder-s"
								v-model="familyInfoArgs.reward_pay"
								disabled
							/>
						</view>
					</view>
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								试用期每月工资
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box disabled"  
								type="number"
								placeholder="2360"
								placeholder-class="place-holder-s"
								v-model="familyInfoArgs.probation_monthly_salary"
								disabled
							/>
						</view>
					</view>
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								正式工资
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box disabled"  
								type="number"
								placeholder="2360"
								placeholder-class="place-holder-s"
								v-model="familyInfoArgs.salary"
								disabled
							/>
						</view>
					</view>
					
					<view
						class="staff-item"
						
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">签署日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.signDate" 
								@change="event => handleDateChange(event,'sign')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.signDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view class="submit-btn-wrapper">
						<view class="submit-btn-inner">
							<view 
								class="submit-btn submit-btn-confirm"
								hover-class="click-btn-confirm"
								@click="handleconfirm"
							>
								确定
							</view>
							<view 
								class="submit-btn"
								hover-class="click-btn"
								@click="handleCancel"
							>
								取消
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="btn-box-wrapper" v-show="isShow">
			<view class="btn-box" hover-class="click-btn" @click="handleAddContract">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name:"labor-contract",
		props: {
			temporaryData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				isShow: !0,
				familyInfoArgs: {
					name: '',
					startDate: '',
					endDate: '',
					alwayDate: '',
					taskDate: '',
					completeTask: '',
					address: '',
					contractWayIndex: -1,
					positionIndex: -1,
					signDate: '',
					period: '',
					reward_pay: '',
					probation_monthly_salary: '',
					salary: '',
					job_description: ''
				}
			};
		},
		computed: {
			...mapGetters(
				[
				 "contractWayArray",
				 "positionArray",
				 "userInfo"
				]
			)
		},
		watch: {
			temporaryData (newVal) {
				 
				if (newVal.id) {
					let index =  this.$utils.handleFilterData(this.contractWayArray, newVal.contract_type.sign_way_status)
					console.log(index,'index')
					let d = {
						staff_id: this.userInfo.staff_id,
						contract_status: 1,
						id: newVal.id,
						name: newVal.sname,
						address: newVal.work_place,
						job_description: newVal.job_description,
						signDate: newVal.sign_date,
						period: newVal.period,
						reward_pay: newVal.reward_pay,
						probation_monthly_salary: newVal.probation_monthly_salary,
						salary: newVal.probation_monthly_salary, 
						contractWayIndex: index,
						startDate: newVal.contract_type.start_date,
						endDate: newVal.contract_type.end_date,
						alwayDate: newVal.contract_type.no_start_date,
						taskDate: newVal.contract_type.task_start_date,
						completeTask: newVal.contract_type.com_mark,
					}	
					this.familyInfoArgs = d
				}
			}
		},
		methods: {
			handleShowFrom (val) {
				this.isShow = val
			},
			handleconfirm () {
				//console.log(this.familyInfoArgs)
				this.isShow = true
			},
			handleCancel () {
				// this.familyInfoArgs = {
				// 	name: '',
				// 	startDate: '',
				// 	endDate: '',
				// 	alwayDate: '',
				// 	taskDate: '',
				// 	completeTask: '',
				// 	address: '',
				// 	contractWayIndex: -1,
				// 	positionIndex: -1,
				// 	signDate: '',
				// 	period: '',
				// 	reward_pay: '',
				// 	probation_monthly_salary: '',
				// 	salary: '',
				// 	job_description: ''
				//}
				this.isShow = true
			},
			contractWayPickerChange (e) {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				d.contractWayIndex = e.detail.value
				this.familyInfoArgs = d
			},
			positionPickerChange (e) {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				d.positionIndex = e.detail.value
				this.familyInfoArgs = d
			},
			handleDateChange (e,t) {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				switch (t) {
					case 'start':
						d.startDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'end':
						d.endDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'alway':
						d.alwayDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'task':
						d.taskDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'sign':
						d.signDate = e.detail.value
						this.familyInfoArgs = d
						return 
					dafault:
						return
				}
			},
			async handleAddContract () {
				if (!this.$route.query.staff_id) {
					if (!this.userInfo.staff_id) return this.$utils.showToast('请先添加入职信息')
				}
				if (!this.handleVerified()) return 
				let staff_id = ''
				if (this.$route.query.staff_id) {
					staff_id = this.$route.query.staff_id
				} else if (this.userInfo.staff_id){
					staff_id = this.userInfo.staff_id
				}
				let way = this.contractWayArray[this.familyInfoArgs.contractWayIndex].id
				let params = {
					staff_id: staff_id,
					contract_status: 1,
					sname: this.familyInfoArgs.name,
					work_place: this.familyInfoArgs.address,
					job_description: this.familyInfoArgs.job_description,
					sign_date: this.familyInfoArgs.signDate,
					period: this.familyInfoArgs.period,
					reward_pay: this.familyInfoArgs.reward_pay,
					probation_monthly_salary: this.familyInfoArgs.probation_monthly_salary,
					salary: this.familyInfoArgs.salary,
					sign_way_status: way
				}
				if (this.familyInfoArgs.id) {
					params.id = this.familyInfoArgs.id
				}
				if (way === 1) {
					params.start_date = this.familyInfoArgs.startDate
					params.end_date = this.familyInfoArgs.endDate
				}
				if (way === 2) {
					params.no_start_date = this.familyInfoArgs.alwayDate
				}
				if (way === 3) {
					params.task_start_date = this.familyInfoArgs.taskDate
					params.com_mark = this.familyInfoArgs.completeTask
				}
				try {
					await this.$api.handleAddContract(params)
					this.$utils.showToast('提交成功')
				} catch (e) {
					console.log('comeponent laborContract(handleAddContract) error ->',e)
				}
			},
			handleVerified () {
				
				if (!this.familyInfoArgs.name) {
					this.$utils.showToast('输入姓名')
					return false
				}
				if (this.familyInfoArgs.contractWayIndex === -1) {
					this.$utils.showToast('请选择签署方式')
					return false
				}
				let way = this.contractWayArray[this.familyInfoArgs.contractWayIndex].id
				if (way === 1) {
					if (!this.familyInfoArgs.startDate) {
						this.$utils.showToast('请选择固定开始日期')
						return false
					}
					if (!this.familyInfoArgs.endDate) {
						this.$utils.showToast('请选择固定结束日期')
						return false
					}
				}
				if (way === 2) { 
					if (!this.familyInfoArgs.alwayDate) {
						this.$utils.showToast('请选择无固定开始日期')
						return false
					}
				}
				if (way === 3) {
					if (!this.familyInfoArgs.taskDate) {
						this.$utils.showToast('请选择任务期限开始日期')
						return false
					}
					if (!this.familyInfoArgs.completeTask) {
						this.$utils.showToast('请输入完成任务标记')
						return false
					}
				}
				if (!this.familyInfoArgs.address) {
					this.$utils.showToast('输入工作地点')
					return false
				}
				if (!this.familyInfoArgs.job_description) {
					this.$utils.showToast('输选择岗位')
					return false
				}
				if (!this.familyInfoArgs.signDate) {
					this.$utils.showToast('选择签署日期')
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding-bottom: 50rpx;
	box-sizing: border-box;
	.btn-box-wrapper {
		width: 100%;
		position: fixed;
		bottom: 200rpx;
		left: 0;
		.btn-box {
			line-height: 80rpx;
			width: 200rpx;
			background: #005AFF;
			border-radius: 3rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			position: absolute;
			left: 50%;
			margin-left: -75rpx;
		}
		.click-btn {
			background: #2c6adb;
		}
	}
	.family-wrapper {
		.family-item {
			margin-bottom: 40rpx;
			.header {
				line-height: 50rpx;
				background: #D9D9D9;
				padding: 0 50rpx;
				font-size: 30rpx;
				color: #979797;
			}
			.staff-item {
				padding: 0 50rpx;
				box-sizing: border-box;
				.hide {
					opacity: 0;
					visibility:hidden;
				}
				.staff-item-title{
					font-size: 30rpx;
					padding: 26rpx 0;
					.dot {
						color:#FF0000
					}
					.title-text {
						color: #676767;
					}
				}
				.upload-bg {
					background: #ECECEC;
					border: none !important;
					font-size: 30rpx;
					color: #646464 !important;
					justify-content: center;
					
				}
				.staff-inp {
					width: 100%;
					height: 70rpx;
					border-radius: 3rpx;
					border: 1rpx solid #D3D3D3;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					.bottom-icons {
						position: absolute;
						right: 20rpx;
						z-index: -1;
					}
					.company-icons {
						margin: 0 20rpx;
					}
					.company-wrapper {
						width: 100%;
						.company-name {
							width: 100%;
							height: 50rpx;
							display: flex;
							align-items: center;
							font-size: 30rpx;
							color: #676767;
						}
						.company-name-tip {
							@extend .company-name;
							color: #979797;
							
						}
					}
					.inp-box {
						width: 100%;
						height: 70rpx;
						font-size: 30rpx;
						color: #676767;
						padding: 0 20rpx;
						box-sizing: border-box;
					}
					.place-holder-s {
						line-height: 70rpx;	
					}
					.disabled {
						background: #ECECEC;
					}
					.card-btn {
						width: 250rpx;
						line-height: 70rpx;
						background: #2D83FE;
						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}
					.btn-click {
						background: #739cd7;
					}
					
				}
			}
		}
	}
	
	.add-wrapper {
		padding: 50rpx 50rpx;
		.add-inner {
			background: #EDEDED;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.insert-btn-inner {
				display: flex;
				align-items: center;
				.insert-btn-text {
					font-size: 30rpx;
					color: #8C8C8C;
				}
			}
		}
		.click-btn {
			background: #d5cdcd;
		}
	}
	.submit-btn-wrapper {
		margin-top: 80rpx;
		.submit-btn-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			.submit-btn {
				line-height: 80rpx;
				width: 200rpx;
				background: #C2C2C2;
				border-radius: 3rpx;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
			}
			.submit-btn-confirm {
				background: #005AFF;
				margin-right: 50rpx;
			}
			.click-btn-confirm {
				background: #2c6adb;
			}
			.click-btn {
				background: #a39e9e;
			}
		}
	}
}
</style>